<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        工作台历
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .layui-table-page select {
            height: 22px;
        }
    </style>
</head>

<body>
<div>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>维保管理</cite></a>
            <a><cite>工作台历</cite></a>
        </span>

    </div>
    <div id="app" class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="在保电梯(台)"><i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.mainElevatorNum == null ? 0 : statistics.mainElevatorNum}}</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="在保电梯(台)"> <i
                            class="iconfont " data-icon=""></i><span>在保电梯(台)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="使用单位(个)"><i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.companyNum == null ? 0 : statistics.companyNum}}</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="使用单位(个)"> <i
                            class="iconfont " data-icon=""></i><span>使用单位(个)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="项目数量(个)"><i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.projectNum == null ? 0 : statistics.projectNum}}</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="项目数量(个)"> <i
                            class="iconfont " data-icon=""></i><span>项目数量(个)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class=" iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="员工人数(个)">
                        <i class="iconfont " data-icon=""></i>
                        <h1>{{statistics.personNum == null ? 0 : statistics.personNum}}</h1>
                    </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="员工人数(个)"> <i
                            class="iconfont " data-icon=""></i><span>员工人数(个)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日保养(台)"> <i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.ednum == null ? 0 : statistics.ednum}}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日保养(台)"> <i
                            class="iconfont " data-icon=""></i><span>今日保养(台)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日维修(台)"> <i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.xiunum == null ? 0 : statistics.xiunum}}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日维修(台)"> <i
                            class="iconfont " data-icon=""></i><span>今日维修(台)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日巡查(台)"> <i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.chanum == null ? 0 : statistics.chanum}}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="今日巡查(台)"> <i
                            class="iconfont " data-icon=""></i><span>今日巡查(台)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-commred"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="合同即将到期"> <i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.daoqiNum == null ? 0 : statistics.daoqiNum}}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="合同即将到期(个)"> <i
                            class="iconfont " data-icon=""></i><span>合同即将到期(个)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-orange"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="即将年检(台)"> <i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.checkNum == null ? 0 : statistics.checkNum}}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="即将年检(台)"> <i
                            class="iconfont " data-icon=""></i><span>即将年检(台)</span></a>
                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-orange"><i class="iconfont icon-dashaxiaoqudizhi01"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="年检超期(台)"> <i
                            class="iconfont " data-icon=""></i>
                        <h1>{{statistics.chaoqiNum == null ? 0 : statistics.chaoqiNum}}</h1>
                    </a>

                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="年检超期(台)"> <i
                            class="iconfont " data-icon=""></i><span>年检超期(台)</span></a>
                </div>
            </section>
        </div>





    </div>


    <div class="row">
        <div class="col-xs-6">
            <div class="panel panel-default">
                <div class="panel-heading" style="overflow: hidden; line-height: 36px;">
                    <span>维保计划</span>
                    <!--<button style="float: right;" class="layui-btn"
                            onclick="ditu()"><i class="layui-icon"></i>进入地图
                    </button>-->
                </div>

                <div class="map_img">
                    <div class="bg_hui">
                            <div class="col-xs-12">
                                <div class="btn-group">
                                    <img class="fl yuan" src="../../images/left.png" alt="" onclick="addDate(-1)">
                                    <div class="fl riqi" id="msg"></div>
                                    <img class="fr yuan" src="../../images/right.png" alt=""  onclick="addDate(1)">

                                </div>
                            </div>
                            <div id="number">

                            </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="col-xs-6">
            <div id='calendar' style="padding: 10px;"></div>
        </div>
    </div>


</div>
</body>
<style>
    .map_img{padding: 10px; background: url("../../images/map.png") no-repeat; min-height: 685px; position: relative; }
    .bg_hui{position: absolute;
        top: 40px;
        left: 21%; padding: 20px 0;width: 480px; text-align: center; background: rgba(224, 224, 224, .8);
        z-index: 999;min-height: 220px; border-radius: 15px;}
    .text-red {
        color: #ea644a;
        font-size: 18px;
    }
    .text-yellow{
        color: #f1a325;  font-size: 18px;
    }
    .text-primary {
        color: #3280fc;  font-size: 18px;
    }
    .text-blue{
        color: #03b8cf;  font-size: 18px;
    }
    .num{font-size: 50px;}
    .fl{float: left;}
    .fr{float: right;}
    .yuan{display: inline-block;}
    .btn-group{overflow: hidden; width: 60%; margin: 0 auto;}
    .riqi{font-size: 25px; line-height: 48px; text-align: center; margin-left: 30px;}

</style>

<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/myAjax.js"></script>
<script type="text/javascript" src="../../js/pub.js"></script>
<script type="text/javascript" src="../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="../../css/tl.css" rel="stylesheet">
<script type="text/javascript" src="../../js/tl1.js"></script>
<script type="text/javascript" src="../../js/tl2.js"></script>
<script>
    layui.use(['laydate', 'element', 'laypage', 'layer', 'form'], function () {
        $ = layui.jquery;//jquery
        laydate = layui.laydate;//日期插件
        lement = layui.element;//面包导航
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        var form = layui.form;
        okLoading.close($);
    });
</script>
<script>

    layui.use(['laydate', 'form'],
        function () {
            var laydate = layui.laydate;
            var layarea = layui.layarea;


        });

    function ditu() {
        location.href="map.html";
    }


    function admin_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
</script>

<script>
    new Vue({
        el: "#app",
        data: {
            statistics: {
            }
        },
        created() {
            let request = {
                url:'maintenance/elevator/statisticstotal',
                data: {
                    userId: $userId,
                },
                method: "get",
            };
            sendRequest(request, (res) => {
                console.log(res);
                this.statistics = res.data
            });
        }
    });

</script>
<script>

    document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid'],
            header: {
                left: 'prev,next',
                center: 'title',
                right: ''
            },
            locale: 'zh-cn',//显示中文
            // defaultDate: '2019-09-13',//默认时间
            selectable: true,
            defaultView: 'dayGridMonth',//The initial view when the calendar loads. String. the default value is 'dayGridMonth' A name of any of the available views, such as 'dayGridWeek', 'timeGridDay', 'listWeek' .
            allDayDefault: false,
            businessHours: true, // 显示营业时间（即周一~周五）
            navLinks: true, // 点击日或者周的名字跳转详细页面
            eventLimit: true, // 事件太多显示更多
            selectMirror: true,
            eventMouseEnter: function (e) {//鼠标悬停事件
                // notice.success(e.el.text);

            },
            eventMouseLeave: function (e) {//!鼠标悬停事件
                // notice.closeAll();
                // console.log(e)
            },
            eventClick: function (s) {

                console.log(s.event.id);
                console.log(s.event.start);
                var end=s.event.id;
                var d = new Date(s.event.start);
                var m = d.getMonth() + 1
                m = m < 10 ? '0' + m : m
                var s = d.getDate()
                s = s < 10 ? '0' + s : s
                var datetime=d.getFullYear() + '-' + m + '-' + s;
                console.log(datetime);
                console.log(end);
                admin_add(datetime,'list.html?end='+ end +'&day='+datetime);

            },
            eventStartEditable: function (s) {
                alert("eventStartEditable");
                console.log(s)
            },
            eventResizableFromStart: function (s) {
                alert("eventResizableFromStart");
                console.log(s);
            },
            eventDurationEditable: function (s) {
                alert("eventDurationEditable");
                console.log(s);
            },
            eventResourceEditable: function (s) {
                alert("eventResourceEditable");
                console.log(s);
            },
            eventDrop: function (s) {
                editSchedule(s);
            },
            eventResize: function (s) {
                editSchedule(s);
            },
            select: function (arg) {
                // layer.open({
                //     title: '在线调试'
                //     , content: html
                // });
                // xadmin.open('添加日程', 'add_schedule?start=' + encodeURIComponent(arg.start) + "&end=" + encodeURIComponent(arg.end) + "&allDay=" + arg.allDay, 600, 500)
                // if (title) {
                //     calendar.addEvent({
                //         title: title,
                //         start: arg.start,
                //         end: arg.end,
                //         allDay: arg.allDay
                //     })
                // }
                // calendar.unselect()//清空点击
            },
            editable: true, //可编辑
            //返回数据字段
            //id:标识
            //title:标题
            //color:事件颜色
            //textColor:标题颜色
            //start:开始时间
            //end:结束时间
            //editable:是否可拖动
            events: function (start, callback,) {
                var startTime = start.startStr;
                var endTime = start.endStr;


                let request = {
                    url: 'maintenance/elevator/liststatistics',
                    data: {
                         userId: $userId,
                    },
                    method: 'get'
                };
                sendRequest(request, (data) => {
                console.log(data);
                var data  = data;
                callback(data);// 将取回的数据传给日历即可
                });
            }
        });
        calendar.render();
    });

    function editSchedule(s) {
        let request = {
            url: 'personalOffice/editSchedule',
            data: {
                userId: $userId,
                id: s.event.id,
                start: s.event.start,
                end: s.event.end
            },
            method: 'post'
        };
        sendRequest(request, (data) => {
            if (data.code === 0) {
                // notice.success("修改成功");
            } else {
                // notice.warning(data.msg);
            }
            console.log(data);

        });
    }

    $(function () {
        //进来选中周视图
        $(".fc-dayGridMonth-button").click()
    })




    var d = new Date();
    var m=d.getMonth()+1;
    m = m < 10 ? '0' + m : m
    var s = d.getDate()
    s = s < 10 ? '0' + s : s
    var riqi=d.getFullYear()+'-'+m+'-'+ s;
    document.getElementById("msg").innerHTML =riqi;

    let request = {
        url: 'maintenance/elevator/statisticsday',
        data: {
            userId: $userId,
            day:riqi,
        },
        method: 'get'
    };
    sendRequest(request, (data) => {

        document.getElementById("number").innerHTML = "<div class='col-xs-3 text-red '>" +
                                          "<h3 class='num exceedCount'>"+data.data.chaoqi+"</h3><p>超期未保</p>" +
                                   "</div>" +
                                   "<div class='col-xs-3 text-yellow'>" +
                               "<h3 class='num maintainorderPlanCount'>" + data.data.daibaoyang +"</h3>" +
                                      "<p>待保养</p>" +
                                 "</div>" +
                                          "<div class='col-xs-3 text-primary'>" +
                                         "<h3 class='num  repairorderEndCount'>"+ data.data.weixiu +"</h3>" +
                                             "<p>已维修</p>" +
                                           "</div>" +
                                        "<div class='col-xs-3 text-blue'>" +
                                             "<h3 class='num  maintainorderEndCount'>"+ data.data.baoyang +"</h3><p>已保养</p></div>";
    });

    function addDate(days){
        d.setDate(d.getDate()+days);
        var m=d.getMonth()+1;
        m = m < 10 ? '0' + m : m
        var s = d.getDate()
        s = s < 10 ? '0' + s : s
        var riqi=d.getFullYear()+'-'+m+'-'+s;
        console.log(riqi);
        document.getElementById("msg").innerHTML = riqi;
        let request = {
            url:'maintenance/elevator/statisticsday',
            data: {
                userId: $userId,
                day:riqi,
            },
            method: 'get'
        };
        sendRequest(request, (data) => {

            document.getElementById("number").innerHTML = "<div class='col-xs-3 text-red '>" +
                "<h3 class='num exceedCount'>"+data.data.chaoqi+"</h3><p>超期未保</p>" +
                "</div>" +
                "<div class='col-xs-3 text-yellow'>" +
                "<h3 class='num maintainorderPlanCount'>" + data.data.daibaoyang +"</h3>" +
                "<p>待保养</p>" +
                "</div>" +
                "<div class='col-xs-3 text-primary'>" +
                "<h3 class='num  repairorderEndCount'>"+ data.data.weixiu +"</h3>" +
                "<p>已维修</p>" +
                "</div>" +
                "<div class='col-xs-3 text-blue'>" +
                "<h3 class='num  maintainorderEndCount'>"+ data.data.baoyang +"</h3><p>已保养</p></div>";
        });


    }
</script>
</html>
